<template>
  <div class="xml_main">
    <Header></Header>
    <el-radio-group v-model="activeMenuName" class="xml-radio-group">
      <el-radio-button class="xml-radio xml-radio-first" label="first">分  析</el-radio-button>
      <el-radio-button v-show="isLoad" class="xml-radio xml-radio-second" label="second">详  情</el-radio-button>
      <el-radio-button class="xml-radio xml-radio-third" label="third">列  表</el-radio-button>
      <el-radio-button class="xml-radio xml-radio-fourth" label="fourth">生  成</el-radio-button>
    </el-radio-group>
    <div v-show="activeMenuName==='first'" class="xml_container">
      <h1 class="xml_h1_title" >流程xml分析</h1>
      <div class="xml_content" >
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xml"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="true"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <span>仅允许导入xml格式文件。</span>
          </div>
        </el-upload>
      </div>
    </div>
    <div v-show="activeMenuName==='second'" class="xml_mermaidChart">
      <MermaidChart :chart="chartDefinition" :name="chartName" />
    </div>
    <div v-show="activeMenuName==='second'" class="xml_base_info">
      <div class="process">
        <h1>{{process.wfname}}</h1>
        <el-descriptions class="margin-top" title="基本信息" :column="3"  border>
          <el-descriptions-item>
            <template slot="label">
              流程名称
            </template>
            {{process.wfname}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              流程名称描述
            </template>
            {{process.wfdesc}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              版本号
            </template>
            {{process.version}}
          </el-descriptions-item>
        </el-descriptions>


        <el-tag class="xml_el_tag">source_attributes</el-tag>
        <template>
          <el-table
            :data="process.sourceAttributes"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="name"
              width="180">
            </el-table-column>
            <el-table-column
              prop="type"
              label="type"
              width="180">
            </el-table-column>
            <el-table-column
              prop="web_type"
              label="web_type">
            </el-table-column>
            <el-table-column
              prop="alias"
              label="alias">
            </el-table-column>
          </el-table>
        </template>

        <el-tag class="xml_el_tag">states</el-tag>
        <template>
          <el-table
            :data="process.states"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="name">
            </el-table-column>
            <el-table-column
              prop="alias"
              label="alias">
            </el-table-column>
            <el-table-column
              prop="description"
              label="description">
            </el-table-column>
          </el-table>
        </template>


        <el-tag class="xml_el_tag">transitions</el-tag>
        <template>
          <el-table
            :data="process.transitions"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="name">
            </el-table-column>
            <el-table-column
              prop="alias"
              label="alias">
            </el-table-column>
            <el-table-column
              prop="from_state"
              label="from_state">
            </el-table-column>
            <el-table-column
              prop="to_state"
              label="to_state">
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <modelverList v-show="activeMenuName==='third'" class="xml_modelver_list"></modelverList>
    <generatedXml class="xml_modelver_list"></generatedXml>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/views/tool/build/Header.vue'
import Footer from '@/views/tool/build/Footer.vue'
import modelverList   from '@/views/processXML/modelverList.vue'
import generatedXml   from '@/views/processXML/generatedXml.vue'
import {getToken} from "@/utils/auth";
import VueMarkdown from "vue-markdown";
import item from "@/layout/components/Sidebar/Item.vue";
import second from "@/components/Crontab/second.vue";
import mermaid from 'mermaid';
import MermaidChart from '@/views/tool/mermaid/MermaidChart'; // 你封装的组件路径


export default {
  name: "processXMLIndex",
  components: { Footer, Header,modelverList ,MermaidChart,generatedXml},
  data() {
    return {
      chartDefinition: '',
      chartName: '',
      activeMenuName: 'first',
      process:{

      },
      // 导入参数
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/modelver/importXml"
      },
      isLoad:false,

    }
  },
  methods: {
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.process = response.data;
      this.chartName = response.data.wfname;
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "分析结果", { dangerouslyUseHTMLString: true });
      this.isLoad = true
      this.activeMenuName = "second"
      let sourceAttributes = [...Object.entries(response.data.source_attributes)];
      let states = [...Object.entries(response.data.states)];
      let transitions = [...Object.entries(response.data.transitions)];
      let tempArray = []
      sourceAttributes.forEach(item => {
        tempArray.push(item[1])
      })
      this.process.sourceAttributes = tempArray.reverse()
      tempArray = []
      states.forEach(item => {
        tempArray.push(item[1])
      })
      this.process.states = tempArray.reverse()
      tempArray = []
      transitions.forEach(item => {
        tempArray.push(item[1])
      })
      this.process.transitions = tempArray.reverse()

      this.chartDefinition ="graph TD;" ;
      this.process.transitions.forEach(item => {
        if(item.from_state && item.to_state){
          if ("START_HERE" == item.from_state){
            this.chartDefinition += " 新建--> "
          }else {
            this.chartDefinition += item.from_state.split("_")[1]+"--> "
          }
          this.chartDefinition += "|"+ item.alias+"|"
          this.chartDefinition += item.to_state.split("_")[1]+";"
        }
      })
      console.log(this.chartDefinition)
      this.$nextTick(() => {
        this.$refs.mermaidChart.renderMermaid();
      });
    },


  }
}
</script>

<style >
  .xml_container{
    width: 80%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .xml_base_info{
    width: 80%;
    height: 100%;
    margin: 0 auto;
    text-align: left;
  }

  .xml_modelver_list{
    text-align: center;
    width: 80%;
    margin: 0 auto;
  }

  .xml_el_tag{
    margin: 10px 0px;
  }
  .xml_h1_title{
    padding: 20px;
    color: var(--vp-color-gradient);
  }
  /* 上传组件边框 鼠标悬浮效果 */
  .el-upload-dragger:hover{
    border-color: var(--vp-color-gradient);
  }
  /* 上传组件边框 字体颜色 */
  .el-upload-dragger .el-upload__text em{
    color: var(--vp-color-gradient);
  }
  /* 上传组件边框 水平居中&垂直居中 */
  .xml_content{
    margin-top: 20%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    height: 70%;            /* 确保父元素有高度 */
    flex-direction: column;
  }
  .xml_main{
    width: 100%;
    height: 100%;
  }

  .xml-radio-group{
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    position: fixed;
  }

  .xml-radio span{
    margin: 10px 0;
    border: none;
    border-radius: 0 4px 4px 0!important;
  }

  .xml-radio-first span{
    background-color: #59ff18;
    border-color: #59ff18;
  }
  .xml-radio-second span{
    background-color: #18ffec;
    border-color: #18ffec;
  }
  .xml-radio-third span{
    background-color: #ff9b18;
    border-color: #ff9b18;
  }
  .xml-radio-fourth span{
    background-color: #ff18a3;
    border-color: #ff18a3;
  }
  .xml-radio-group .is-active span{
    color: #606266!important;
    width: 120px;
  }
  .xml-radio-group .xml-radio-first.is-active span{
    background-color: #59ff18;
    border-color: #59ff18;
  }

  .xml-radio-group .xml-radio-second.is-active span{
    background-color: #18ffec;
    border-color: #18ffec;
  }

  .xml-radio-group .xml-radio-third.is-active span{
    background-color: #ff9b18;
    border-color: #ff9b18;
  }

  .xml-radio-group .xml-radio-fourth.is-active span{
    background-color: #ff18a3;
    border-color: #ff18a3;
  }

  .xml_main{
    transition: all 1s ease-out;		/*加上过渡使主题转换更加自然 */
  }
  .el-radio-button__inner{
    transition: all 1s ease-out!important;		/*加上过渡使主题转换更加自然 */
    animation-direction: alternate; /* 动画方向交替 */
  }


  /* 定义一个名为 'expand' 的关键帧动画 */
  @keyframes expand {
    0% { width: 75px; }  /* 动画开始时的宽度 */
    50% { width: 100px; } /* 中间点时的宽度 */
    100% { width: 120px; } /* 动画结束时的宽度 */
  }

  /* 应用动画到元素上 */
  .el-radio-button__inner {
    width: 75px;  /* 初始宽度 */
    /* 设置动画 */
    animation-name: expand;
    animation-direction: alternate; /* 动画方向交替 */
  }

  .xml_mermaidChart{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>
